<template>
  <view class="container">
    <!-- 顶部tab栏 -->
    <view class="tab-bar">
      <view class="tab-item" v-for="(category, index) in categories"  @click="changeCategory(index)">
        <text :class="['tab-text', { active: currentCategory === index }]">{{ category }}</text>
      </view>
    </view>
    <!-- 图片列表 -->
    <scroll-view scroll-y class="image-list" >
      <view class="image-item" v-for="(image, index) in imageList" :key="index" @click="previewImage(index)">
        <view>
			<image :src="image.work_url"></image>
		</view>
		<view>
			{{ image.work_name }}
		</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getWorksImageList } from '@/api/works.js'
export default {
  data() {
    return {
      categories: ['陶器', '玉石器', '铜器', '其他'], // 图片分类
      currentCategory: 0, // 当前选中的分类
      imageList: []
	 //  [
	 //    [
		// 	{url:"http://demo.cyyyds.cn/uploads/20250114/0-1.jpg", title:''},
		// 	{url:"http://demo.cyyyds.cn/uploads/20250114/0-2.jpg", title:''},
		// 	{url:"http://demo.cyyyds.cn/uploads/20250114/0-3.jpg", title:''}
		// ],
		// [
		// 	   {url:"http://demo.cyyyds.cn/uploads/20250114/1-1.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/1-2.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/1-3.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/1-4.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/1-5.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/1-6.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/1-7.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/1-8.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/1-9.jpg", title:''}
		// ],
		// [
		// 	{url:"http://demo.cyyyds.cn/uploads/20250114/2-1.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/2-2.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/2-3.jpg", title:''},
		// 	// {url:"http://demo.cyyyds.cn/uploads/20250114/2-4.jpg", title:''}
		// ],
		// [
		// 	{url:"http://demo.cyyyds.cn/uploads/20250114/3-1.jpg", title:''}
		// ]
	 //  ], 
    };
  },
  mounted() {
    this.loadImages()
  },
  methods: {
    // 切换分类
    changeCategory(index) {
      this.currentCategory = index;
      this.page = 1;
	  this.loadImages();
    },
    
	loadImages(){
		getWorksImageList(this.currentCategory).then(res=>{
			this.imageList = res.data
		})
		// if(this.currentCategory==0){
		// 	this.imageList = [
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/0-1.jpg", title:'白陶斗笠形器'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/0-2.jpg", title:'陶鼓形壶'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/0-3.jpg", title:'透底器'},
		// 	];
		// }else if(this.currentCategory==1){
		// 	this.imageList = [
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/1-1.jpg", title:'七孔玉刀'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/1-2.jpg", title:'玉璋'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/1-3.jpg", title:'玉坠'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/1-4.jpg", title:'玉柄形器'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/1-5.jpg", title:'石钺'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/1-6.jpg", title:'镶嵌绿松石玉钺'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/1-7.jpg", title:'玉戈'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/1-8.jpg", title:'玉戚壁'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/1-9.jpg", title:'玉圭'}
		// 	];
		// }else if(this.currentCategory==2){
		// 	this.imageList = [
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/2-1.jpg", title:'镶嵌绿松石兽面纹铜牌饰'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/2-2.jpg", title:'网格纹铜鼎'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/2-3.jpg", title:'铜斝'},
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/2-4.jpg", title:'铜铃'}
		// 	];
		// }else if(this.currentCategory==3){
		// 	this.imageList = [
		// 		{url:"http://demo.cyyyds.cn/uploads/20250114/3-1.jpg", title:''}
		// 	];
		// }else{
		// 	this.imageList = [];
		// }
	},
    // 预览图片
    previewImage(index) {
      uni.previewImage({
		  current: index,
		  urls: this.imageList.map(img=>img.url)
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
	.tab-bar {
		white-space: nowrap;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
	
		.tab-item {
			display: inline-block;
			margin-right: 20px;
			width: 25%;
			text-align: center;
			letter-spacing: 10upx;
		
			.tab-text {
				font-size: 30upx;
				color: #666;
			}
			
			.tab-text.active {
				font-size: 30upx;
				color: #721b28;
				font-weight: bold;
			}
		}
	}
	
	.image-list {
		flex: 1;
		padding: 50upx;
	
		.image-item {
			margin-bottom: 50upx;
			float: left;
			text-align: center;
			image {
				width: 300upx;
				height: 300upx;
				border-radius: 30upx;
				float: left;
				margin-right: 50upx;
				margin-bottom: 10upx;
			}
		}
	}
}


</style>
